<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Câu 2</title>
<script src='jquery-1.10.2.min.js'> </script>

<div id="Hinh1" align = "center">Hình 1</div>
<div id="Hinh2" align = "center">Hình 2</div>
<div id="Hinh3" align = "center">Hình 3</div>
<div id="Hinh4" align = "center">Hình 4</div>

<div id="showImage"></div>

<div id="small" align = "center">300x200</div>
<div id="medium" align = "center">400x300</div>
<div id="large" align = "center">500x400</div>


<style type="text/css">
	#showImage{
		position:fixed;		
		left:10px;
		top:90px;
		background-color:white;
		width:500px;
		height:400px;			
	}
	#Hinh1{
		position:fixed;
		width:70px;
		height:40px;
		left:10px;
		top:20px;
		background-color:yellow;
	}
	
	#Hinh2{
		position:fixed;
		width:70px;
		height:40px;
		left:130px;
		top:20px;
		background-color:yellow;
	}
	
	#Hinh3{
		position:fixed;
		width:70px;
		height:40px;
		left:280px;
		top:20px;
		background-color:yellow;
	}
	
	#Hinh4{
		position:fixed;
		width:70px;
		height:40px;
		left:430px;
		top:20px;
		background-color:yellow;
	}
	
	#small{
		position:fixed;
		width:80px;
		height:40px;
		left:10px;
		top:500px;
		background-color:yellow;
	}
	
	#medium{
		position:fixed;
		width:80px;
		height:40px;
		left:160px;
		top:500px;
		background-color:yellow;
	}
	
	#large{
		position:fixed;
		width:80px;
		height:40px;
		left:310px;
		top:500px;
		background-color:yellow;
	}
	
</style>

<script>
	var w,h;
	var p;
	
	$('#Hinh1').click(function(){
		w=200;
		h=100;
		p=1;
		$('#showImage').html('<img src="1.png" width="'+w+'" height="'+h+'"/>');
	});	
	$('#Hinh2').click(function(){
		w=200;
		h=100;
		p=2;
		$('#showImage').html('<img src="2.png" width="'+w+'" height="'+h+'"/>');
	});
	$('#Hinh3').click(function(){
		w=200;
		h=100;
		p=3;
		$('#showImage').html('<img src="3.png" width="'+w+'" height="'+h+'"/>');
	});
	$('#Hinh4').click(function(){
		w=200;
		h=100;
		p=4;
		$('#showImage').html('<img src="4.png" width="'+w+'" height="'+h+'"/>');
	});
	
	$('#small').click(function(){
		w=300;
		h=200;
		$('#showImage').html('<img src="'+p+'.png" width="'+w+'" height="'+h+'"/>');
	});
	$('#medium').click(function(){
		w=400;
		h=300;		
		$('#showImage').html('<img src="'+p+'.png" width="'+w+'" height="'+h+'"/>');
	});
	$('#large').click(function(){
		w=500;
		h=400;		
		$('#showImage').html('<img src="'+p+'.png" width="'+w+'" height="'+h+'"/>');
	});
</script>
